import { ReactNode } from "react";
import { twMerge } from "tailwind-merge";

function FeatureCard(props: { title: string, description: string, children?: ReactNode, className?: string }) {
    const { title, description, children, className } = props;

    return (
        <div className={twMerge("p-6 bg-neutral-900 border border-white/10 rounded-3xl", className)}>
            <div className="aspect-video">{children}</div>
            <div>
                <h3 className="mt-6 text-3xl font-medium">{title}</h3>
                <p className="mt-2 text-white/50">{description}</p>
            </div>
        </div>
    );
}

export default FeatureCard;